<template>
	<view class="container">
		<button class="roundBtn" v-for="(role, index) in playerRoles" :key="index"
			:style="playerPos[index]">{{ role }}</button>
		<button class="roundBtn btmBtn subBtn">-</button>
		<button class="roundBtn btmBtn addBtn">+</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'


	const playerNumber = ref(5) //玩家数量
	const playerRoles = ref([]) //玩家角色数组
	const playerPos = ref([]) //玩家位置数组
	const originX = ref(360) //原点X坐标
	const originY = ref(650) //原点Y坐标
	const r = ref(200) //桌子半径
	const dX = ref(-30) //整体偏移X坐标
	const dY = ref(-80) //整体偏移Y坐标
	const startAngle = ref(Math.PI / 2) //起始点角度

	onMounted(() => {
		//两个玩家之间夹角
		let dAngle = 2 * Math.PI / playerNumber.value
		for (let i = 0; i < playerNumber.value; i++) {
			playerRoles.value.push(i + 1)
			let pos = {}
			let x = originX.value + r.value * Math.cos(startAngle.value + i * dAngle) + dX.value
			let y = originY.value + r.value * Math.sin(startAngle.value + i * dAngle) + dY.value
			pos.left = String(x) + 'rpx'
			pos.top = String(y) + 'rpx'
			playerPos.value.push(pos)
		}
	})
</script>

<style>
	.container {
		height: 100%;
		width: 100%;
		background-color: rgba(255, 0, 0, 0.6);
	}

	.roundBtn {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		font-size: 40rpx;
		padding: 0;
		justify-content: center;
		align-items: center;
	}

	.playerBtn {}

	.btmBtn {
		top: 1250rpx;
	}

	.subBtn {
		left: 480rpx;
	}

	.addBtn {
		left: 600rpx;
	}
</style>